﻿
@page "/rich-text-editor/types"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.RichTextEditor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the different behavior of toolbar support in the Rich Text Editor. Change the toolbar type as multiRow or expand from the property panel to see its appearance.</p>
</SampleDescription>
<ActionDescription>
    <p> The Rich Text Editor allows you to configure different types of toolbar using the <code>ToolbarSettings.Type</code> property. The types of toolbar are: </p>
    <ul>
        <li><code>Expand</code>: The toolbar hides the overflowing items in the next row. Click the expand arrow to view overflowing toolbar items</li>
        <li><code>MultiRow</code>: The toolbar hides the overflowing items in the next row.</li>
    </ul>
</ActionDescription>

<div class="col-lg-8 control-section">
    <div class="control-section">
        <SfRichTextEditor>
            <p>The Rich Text Editor is a WYSIWYG ("what you see is what you get") editor useful to create and edit content and return the valid HTML markup or markdown of the content.</p>

            <p><b>Toolbar</b></p>

            <ol>
                <li>
                    <p>The Toolbar contains commands to align the text, insert a link, insert an image, insert list, undo/redo operations, HTML view, etc </p>
                </li>
                <li>
                    <p>The Toolbar is fully customizable. </p>
                </li>
            </ol>

            <p><b>Links</b></p>
            <ol>
                <li>
                    <p>You can insert a hyperlink with its corresponding dialog. </p>
                </li>
                <li>
                    <p>Attach a hyperlink to the displayed text. </p>
                </li>
                <li>
                    <p>Customize the quick toolbar based on the hyperlink. </p>
                </li>
            </ol>

            <p><b>Validation</b></p>
            <ul>
                <li>
                    <p>The editor’s content can be validated on form submission by applying validation rules and validation message.</p>
                </li>
            </ul>

            <p><b>Locale.</b></p>
            <ul>
                <li>
                    <p>The editor provides an option to localize its static strings to adapt the editor to a local language.</p>
                </li>
            </ul>

            <p><b>Image.</b></p>
            <ol>
                <li>
                    <p>Allows you to insert images from an online source as well as the local computer. </p>
                </li>
                <li>
                    <p>You can upload an image. </p>
                </li>
                <li>
                    <p>Provides an option to customize the quick toolbar for an image. </p>
                </li>
            </ol>
            <img alt="Logo" src="images/rich-text-editor/rte-image-feather.png" />
            <RichTextEditorToolbarSettings Type="@Tooltype" Items="@Tools" />
        </SfRichTextEditor>
    </div>
</div>

<div class="col-lg-4 property-section">
    <div id="property" title="Properties">
        <table id="property" title="Properties">
            <tbody>
                <tr>
                    <td>
                        <div> ToolbarType </div>
                    </td>
                    <td>
                        <div style="width: 200px">
                            <SfDropDownList @ref="DropObj" TItem="GameFields" TValue="string" PopupHeight="200px" @bind-Value="@DropValue" DataSource="@Options">
                                <DropDownListFieldSettings Text="text" Value="value" />
                                <DropDownListEvents TValue="string" TItem="GameFields" ValueChange="valueChange" />
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    .property-section table td {
        width: 50%;
    }

    .property-section table div {
        padding-left: 10px;
        padding-top: 35px;
    }
</style>

@code{
    SfDropDownList<string, GameFields> DropObj;

    private ToolbarType Tooltype = ToolbarType.Expand;
    private string DropValue { get; set; } = "Expand";

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
        new ToolbarItemModel() { Command = ToolbarCommand.Print },
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };

    private class GameFields
    {
        public string value { get; set; }
        public string text { get; set; }
    }

    private List<GameFields> Options = new List<GameFields>() {
        new GameFields(){ value= "Expand", text= "Expand" },
        new GameFields(){ value= "Multi Row", text= "Multi Row" },
    };

    private void valueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GameFields> args)
    {
        switch (args.Value)
        {
            case "Expand":
                this.Tooltype = ToolbarType.Expand;
                break;
            case "Multi Row":
                this.Tooltype = ToolbarType.MultiRow;
                break;
        }
    }
}